<template>
    <div class="order-info-form"> 
        <el-form ref="formRef" :model="infoData" :inline="true" :rules="formRules" label-position="top">
            <el-form-item label="预计提箱日期" prop="planPickupDate" required>
                <el-date-picker v-model="infoData.planPickupDate" clearable type="date" style="width: 100%;" :disabled-date="disabledDate"/>
            </el-form-item>
            <el-form-item label="支付方式" prop="paymentMethod" required>
                <el-select v-model="infoData.paymentMethod" clearable>
                    <el-option label="对公转账" value="5"></el-option>
                    <el-option label="在线支付" value="10"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发票类型" prop="invoiceType" required>
                <el-select v-model="infoData.invoiceType" clearable>
                    <el-option label="增值税普通发票" value="5"></el-option>
                    <el-option label="增值税专用发票" value="10"></el-option>
                    <el-option label="形式发票" value="15"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="结算账期" >
                <el-input v-model="infoData.period" clearable>
                    <template #suffix>天</template>
                </el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contacts" required>
                <el-input v-model="infoData.contacts" disabled clearable></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="tel" required>
                <el-input v-model="infoData.tel" disabled clearable><template #prefix>+{{infoData.areaCode}}</template></el-input>
            </el-form-item>
            <el-form-item label="留言" class="leave-msg" >
                <el-input v-model="infoData.leaveMsg" type="textarea" clearable></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>


<script lang="ts" setup>
import { reactive, ref ,onActivated} from 'vue'
import Cookies from "js-cookie";

const props = defineProps({
    orderInfo:{
        type:Object,
        default:()=>{
            return {}
        }
    }
}) 

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() -  86400000
}

const infoData = reactive({
    planPickupDate:"",
    paymentMethod:"5",
    invoiceType:"5",
    period: "",
    contacts:"",
    tel:"",
    leaveMsg:"",
    areaCode:"",
})  
const formRules = {
    planPickupDate: [{ required: true, message: '请输入提箱日期', trigger: 'blur' }],
    paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'blur' }],
    invoiceType: [{ required: true, message: '请选择发票类型', trigger: 'blur' }],
    contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    tel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
};

const formRef = ref(null); // 获取表单引用

const submitForm = async () => {
    try {
        // 触发表单验证
        const isValid = await formRef.value.validate();
        if (isValid) {
            return true
        }else{
            return false
        }
    } catch (error) {
        return false
    }
};
onActivated(()=>{
    infoData.planPickupDate = ''
    infoData.period = ''
    infoData.leaveMsg = ''
    infoData.contacts = JSON.parse(Cookies.get("User-Info"))?.nickname
    infoData.tel = JSON.parse(Cookies.get("User-Info"))?.mobile
    infoData.areaCode = JSON.parse(Cookies.get("User-Info"))?.areaCode
})
defineExpose(
    { 
        formData:infoData,
        validate: submitForm 
    }
)

</script>

<style lang="scss" scoped>
.order-info-form{
    padding-top: 30px;
}
.el-form-item {
    display: inline-block;
    width: 350px;
    float: left;
    margin-right: 30px;
}
.leave-msg{
    width: 700px;
}
</style>